<template>
    <!-- <a-skeleton :loading="true" :animation="true"> -->
        <a-collapse :default-active-key="[name ? no : `${no}-1`]" :class="{ 'styles': !name }">
            <a-collapse-item :key="name ? no : `${no}-1`">
                <template #header>
                    <div class="collapse-title">
                        <!-- <a-skeleton-line :rows="1" v-if="isLoading"></a-skeleton-line> -->
                        {{ title }}
                        <span class="total" v-if="total">全部 ({{ total }})</span>
                    </div>
                </template>
                <a-collapse-item :header="name" :key="`${no}-1`">
                    <slot></slot>
                </a-collapse-item>
            </a-collapse-item>
        </a-collapse>
    <!-- </a-skeleton> -->
</template>
<script lang="ts" setup>
defineProps({
	isLoading: { required: true, type: Boolean, default: () => { return true }  }, // 详情
	no: { required: true, type: String, default: () => { return '' }  }, // 详情
	title: { required: true, type: String, default: () => { return '' }  }, // 详情
	name: { required: true, type: String, default: () => { return '' }  }, // 详情
	total: { required: true, type: Number, default: () => { return 0 }  }, // 详情
})
</script>